<%@ page language="java"  pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  <script type="text/javascript" charset="utf-8">
  $(function() {
	    chartFun=function(){
	    	var createdatetimeStart=$('#admin_productchart_searchForm input[name="createdatetimeStart"]').val();
	    	var createdatetimeEnd=$('#admin_productchart_searchForm input[name="createdatetimeEnd"]').val();
	    	var style=$('#chartstyle').combobox('getValue');
	    	if(style=="月度品类销售量图形报表"){
	    	$.ajax({
	        type : "POST",
	        dataType : 'JSON',
	        data :{
	        	createdatetimeStart : createdatetimeStart,
	        	createdatetimeEnd : createdatetimeEnd 	
	        },
	        url : " ${pageContext.request.contextPath}/saleChartAction!productHighChart.action",
	        success : function(result) {
	        	new Highcharts.Chart({
	                chart : {
	                    renderTo : 'container', // 放置图表的DIV容器对应的id属性
	                    type : 'spline' // 图表类型line, spline, area, areaspline,
	                // column, bar, pie , scatter
	                },
	                title : {
	                    text : '月度品类销售量图形报表' // 图表标题
	                },
	                subtitle : {
	                    text : 'EAT IT' // 副标题
	                },
	                xAxis : {   
	                	type: 'category' // x轴
	                },
	                credits : {
	                    text : 'EAT IT', // 设置LOGO区文字
	                },
	                exporting : {
	                    enabled : true
	                },
	                yAxis : {
	                    min : 0,
	                    title : {
	                        text : '销售量 (个单位)'
	                    }
	                },
	                legend : {
	                    layout : 'vertical',
	                    backgroundColor : '#FFFFFF',
	                    align : 'left',
	                    verticalAlign : 'top',
	                    x : 100,
	                    y : 70,
	                    floating : true,
	                    shadow : true
	                },
	                tooltip : { //当鼠标悬置数据点时的格式化提示
	                    formatter : function() {
	                        return '' + this.x + '月: ' + this.y + '个单位';
	                    }
	                },
	                plotOptions : {
	                    column : {
	                        dataLabels : {
	                            enabled : true
	                        },
	                        pointPadding : 0.2,
	                        borderWidth : 0
	                    }
	                },
	                series :result
	            });
	        }
	    });
	  }
	    	if(style=="月度品类销售额图形报表"){
		    	$.ajax({
		        type : "POST",
		        dataType : 'JSON',
		        data :{
		        	createdatetimeStart : createdatetimeStart,
		        	createdatetimeEnd : createdatetimeEnd 	
		        },
		        url : " ${pageContext.request.contextPath}/saleChartAction!amountHighChart.action",
		        success : function(result) {
		        	new Highcharts.Chart({
		                chart : {
		                    renderTo : 'container', // 放置图表的DIV容器对应的id属性
		                    type : 'column' // 图表类型line, spline, area, areaspline,
		                // column, bar, pie , scatter
		                },
		                title : {
		                    text : '月度品类销售额图形报表' // 图表标题
		                },
		                subtitle : {
		                    text : 'EAT IT' // 副标题
		                },
		                xAxis : {   
		                	type: 'category' // x轴
		                },
		                credits : {
		                    text : 'EAT IT', // 设置LOGO区文字
		                },
		                exporting : {
		                    enabled : true
		                },
		                yAxis : {
		                    min : 0,
		                    title : {
		                        text : '销售量 (个单位)'
		                    }
		                },
		                legend : {
		                    layout : 'vertical',
		                    backgroundColor : '#FFFFFF',
		                    align : 'left',
		                    verticalAlign : 'top',
		                    x : 100,
		                    y : 70,
		                    floating : true,
		                    shadow : true
		                },
		                tooltip : { //当鼠标悬置数据点时的格式化提示
		                    formatter : function() {
		                        return '' + this.x + '月: ' + this.y + '元';
		                    }
		                },
		                plotOptions : {
		                    column : {
		                        dataLabels : {
		                            enabled : true
		                        },
		                        pointPadding : 0.2,
		                        borderWidth : 0
		                    }
		                },
		                series :result
		            });
		        }
		    });
		  }
	    if(style==""){
	    	$.messager.alert('提示','请先选择类型!','warning');
	    }
	 };
});
</script>
<div class="easyui-layout" data-options="border:false,fit:true">
<div region="north" data-options="border:false,title:'过滤信息'" style="height:60px;overflow:hidden;">
<form id="admin_productchart_searchForm" method="post"  style="padding:5px 0px;">
&nbsp;&nbsp;<label style="font-weight:bold;">类型&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input id="chartstyle" class="easyui-combobox"  data-options="panelHeight:'auto',width:180,required:true,editable:false,valueField: 'label',textField: 'value',data: [{label: '月度品类销售量图形报表',value: '月度品类销售量图形报表'},{label: '月度品类销售额图形报表',value: '月度品类销售额图形报表'}]"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label style="font-weight:bold;">时间&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;从&nbsp;</label><input name="createdatetimeStart"  class="easyui-datebox" /><label style="font-weight:bold;">&nbsp;至&nbsp;</label><input name="createdatetimeEnd" class="easyui-datebox" />
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="chartFun();" >显示报表</a>
</form>
</div>
<div region="center" data-options="fit:true">
<div id="container" style="margin: 0 auto;float:center;"></div>
</div>
</div>

